import type { Meta, StoryObj } from '@storybook/react-webpack5';
import TransMenu from './index';

const meta: Meta<typeof TransMenu> = {
  title: '第六章：Menu',
  id: 'Menu',
  component: TransMenu,
  subcomponents: { 'SubMenu': TransMenu.SubMenu, 'Item': TransMenu.Item }
};
export default meta;

type Story = StoryObj<typeof TransMenu>;

export const ADefaultMenu: Story = {
  render: (args) => (
    <TransMenu defaultIndex='0' {...args}>
      <TransMenu.Item>
        cool link
      </TransMenu.Item>
      <TransMenu.Item>
        cool link 2
      </TransMenu.Item>
      <TransMenu.Item disabled>
        disabled
      </TransMenu.Item>
      <TransMenu.SubMenu title="下拉选项">
        <TransMenu.Item>
          下拉选项一
        </TransMenu.Item>
        <TransMenu.Item>
          下拉选项二
        </TransMenu.Item>
      </TransMenu.SubMenu>
    </TransMenu>
  ),
  name: '默认Menu',
};

export const BClickMenu: Story = {
  render: (args) => (
    <TransMenu {...args} defaultIndex='0' mode="vertical">
      <TransMenu.Item>
        cool link
      </TransMenu.Item>
      <TransMenu.Item>
        cool link 2
      </TransMenu.Item>
      <TransMenu.SubMenu title="点击下拉选项">
        <TransMenu.Item>
          下拉选项一
        </TransMenu.Item>
        <TransMenu.Item>
          下拉选项二
        </TransMenu.Item>
      </TransMenu.SubMenu>
    </TransMenu>
  ),
  name: '纵向的 Menu',
};

export const COpenedMenu: Story = {
  render: (args) => (
    <TransMenu {...args} defaultIndex='0' mode="vertical" defaultOpenSubMenus={['2']}>
      <TransMenu.Item>
        cool link
      </TransMenu.Item>
      <TransMenu.Item>
        cool link 2
      </TransMenu.Item>
      <TransMenu.SubMenu title="默认展开下拉选项">
        <TransMenu.Item>
          下拉选项一
        </TransMenu.Item>
        <TransMenu.Item>
          下拉选项二
        </TransMenu.Item>
      </TransMenu.SubMenu>
    </TransMenu>
  ),
  name: '默认展开的纵向 Menu',
}; 